{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'component/layui/css/layui.css' %}" media="all">
    <script src="{% static 'ueditor/neditor.config.js' %}"></script>
    <script src="{% static 'ueditor/neditor.all.min.js' %}"></script>
    <script src="{% static 'common/js/jquery1.12.4.min.js' %}"></script>
    <script src="{% static 'common/js/jquery.cookie.js' %}"></script>
    <script src="{% static 'component/layui/layui.js' %}"></script>
</head>
<body>
<div class="layui-form" style="height: 38px;padding: 4px;">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 120px">请选择描述的类型:</label>
        <div class="layui-inline">
            <select name="typeId" lay-verify="required">
                <option value="-1">请选择</option>
                {% for type in desc_type_list %}
                    <option value="{{ type.id }}">{{ type.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        </div>
        <input type="hidden" name="seceneId" id="seceneId" value="{{ secene_id }}">
        <input type="hidden" name="whichImage" id="whichImage" value="{{ which_image }}">
        <input type="hidden" name="top" id="top" value="{{ top }}">
        <input type="hidden" name="left" id="left" value="{{ left }}">
    </div>
</div>
<textarea id="editor" type="text/plain" style="width: 968px;height: 520px"></textarea>
<script>
    UEDITOR_CONFIG.toolbars = [[
        'fullscreen', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', '|',
        'removeformat', 'blockquote', 'pasteplain', 'forecolor', 'backcolor', '|',
        'insertorderedlist', 'insertunorderedlist', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', '|',
        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
        'link', 'unlink', 'anchor',
        'insertvideo', 'music', '|', 'insertimage'
    ]];
    UEDITOR_CONFIG.serverUrl = "/ueditor_upload/";
    var ue = UE.getEditor('editor');
    layui.use('form', function () {
        var form = layui.form();
        $(".layui-form-select").css("z-index", 999999);
        //监听提交
        form.on('submit(formDemo)', function (data) {
            if (parseInt(data.field.typeId) === -1) {
                layer.msg('没有选择标注的类型!', {icon: 5});
                return false;
            }
            data.field.content = UE.getEditor('editor').getContent();
            $.ajax({
                type: "POST",
                url: "/outlines/secene/mark/",
                data: data.field,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
                },
                success: function (data) {
                    if (data === 'success') {
                        var layer = layui.layer;
                        layer.msg('添加图片标注成功,请点击弹出框的右上角关闭');
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg(errorThrown, {icon: 5});
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
